<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>便签--朱明浩</title>
    <link rel="stylesheet" href="https://g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
    <link rel="stylesheet" href="./css/index.min.css">
</head>

<body>
    <div id="app">
        <div class="page-group">
            <div class="page page-current">

                <!-- header--start -->
                <header class="bar bar-nav">
                    <a class="icon icon-star pull-left" @click="setCookie('tasks',tasks,30)"></a>
                    <a class="icon icon-edit pull-right" @click="showAddTask=!showAddTask"></a>
                    <h1 class="title">便签</h1>
                </header>
                <!-- header--end-->

                <!-- content--start -->
                <div class="content">
                    <div class="card" v-for="(task) in checkedTypeTasks">
                        <div class="card-content">
                            <div class="card-content-inner">
                                <p>{{task.text}}</p>
                                <div class="btns-box">
                                    <!-- 删除任务--start -->
                                    <!-- <button class="button button-danger" @click="showRemoveTask=!showRemoveTask,removeTaskIndex=index"> -->
                                    <button class="button button-danger" @click="tryRemoveTask(task.id)">
                                        <i class="icon icon-remove"></i>
                                    </button>
                                    <!-- 删除任务--end -->
                                    <!-- 标记任务状态--start -->
                                    <button class="button button-success" @click="task.done=!task.done" :class='[task.done?"button-fill":""]'>
                                        <i class="icon icon-check"></i>
                                    </button>
                                    <!-- 标记任务状态--end -->
                                </div>
                            </div>

                        </div>
                    </div>
                </div>
                <!-- content--end -->

                <!-- footer--start -->
                <nav class="footer bar bar-tab">
                    <a class="tab-item  button" v-for="(tasksType,index) in tasksTypes" :class="[index==checkedIndex?'button-fill':'']" :key="tasksType.id" @click="switchTaskType(index)">
                           {{  tasksType.type }}
                    </a>
                </nav>
                <!-- footer--end -->

                <!-- addTask--start -->
                <div class="shade-box addTask" v-show="showAddTask">
                    <div class="shade-bg" @click="showAddTask=!showAddTask"></div>
                    <div class="shade-content">
                        <textarea placeholder="请输入任务内容" v-model="newTaskText"></textarea>
                        <button class="button pull-right" @click="showAddTask=!showAddTask,addTask()">添加</button>
                    </div>
                </div>
                <!-- addTask--end -->

                <!-- removeTask --start -->
                <div class="shade-box removeTask" v-show="showRemoveTask">
                    <div class="shade-bg" @click="showRemoveTask=!showRemoveTask"></div>
                    <div class="shade-content">
                        <p>确定要删除吗？</p>
                        <button class="button pull-right" @click="showRemoveTask=!showRemoveTask,removeTask()">确定</button>
                    </div>
                </div>
                <!-- removeTask --end -->

            </div>
        </div>
    </div>
</body>
<script src="./js/vue.js"></script>
<script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
<script src="./js/index.js"></script>

</html>